微信小程序引入外部字体 |
您所在的位置:网站首页 › 小程序 样式 › 微信小程序引入外部字体 |
微信小程序引入外部字体
前言wx.loadFontFaceBase64尾巴
前言
微信小程序由于打包体积限制,不支持直接引入字体文件。但是如果我们想引入自定义的字体该怎么操作了?接下来我们介绍两种引入自定义字体的方式。 wx.loadFontFace第一种方式就是通过官方的wx.loadFontFace(Object object)这个API去加载字体,具体用法请参考官方wx.loadFontFace用法。大概使用方法如下: wx.loadFontFace({ family: 'Bitstream Vera Serif Bold',//这里名字可以自定义 source: 'url("https://sungd.github.io/Pacifico.ttf")', success: console.log }) //然后在wxss中定义好样式,名字要跟上面的family一样,然后在wxml中引用样式即可 .font-loaded { font-family: "Bitstream Vera Serif Bold"; } Base64有人说我只有字体文件(ttf),没有对应网络地址的文件,那么我该怎么引入了?下面我们开始说第二种方式:将字体转化成Base64方式引入。注意:这种方式只适合你知道要显示哪些字。 首先打开在线字体转换网站,这个网站可以根据你上传的字体文件,并根据你要显示的字,定制出属于你自己的字体文件,这一步主要是为了减少字体文件的体积,为后面微信小程序中直接引入Base64做好准备。 接下来就是打开字体转化网站,然后点击Add fonts按钮,上传你再上面生成的客制化本地的字体文件,然后等待进度条走满,如下图标注: 最终我们看下效果图: 特别要注意的是,第二种方式并不适合所有情况,只有你确定自己要显示什么字了使用这种方式会更方便,不需要网络地址。 好了,今天分享就到这里了,如果文章对你有帮助,欢迎给我关注,点赞,评论,谢谢! |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |